<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="admin/common/html/tableHead :: head(~{::title},~{::link},~{::style})">

    <title th:text=${title}></title>
    <!-- 这儿引用单独的css link -->
    <!-- Ladda for Bootstrap 3按钮加载进度插件 -->
    <link rel="stylesheet" th:href="@{/static/admin/assets/js/button/ladda/ladda.min.css}">
    <!-- bootstrap-table表单样式 -->
    <link th:href="@{/static/admin/assets/js/bootstrap/css/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
    <!-- 用户界面自定义css -->
    <link th:href="@{/static/admin/user/css/user-add.css}" rel="stylesheet"/>
    <style type="text/css"></style>
</head>

<style>
    .tips {
        text-align: center
    }
</style>
<body>

<div class="content-wrap">
    <div class="row">
        <div class="col-sm-12">
            <div class="nest" id="elementClose">
                <div class="">
                </div>
                <div class="body-nest" id="element">
                    <div class="panel-body">
                        <form class="form-horizontal m" id="form-add">
                            <input id="taskId" name="taskId" type="hidden" th:value="${taskId}"/>

                            <div id="taskFormDiv"></div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 通用js -->
<div th:include="admin/common/html/js :: onload_js">

</div>
<!-- bootstarp 表格 -->
<script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrap-table/bootstrap-table.min.js}"
        type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"
        type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/base_list.js}" type="text/javascript"></script>


<!-- 弹窗 -->
<script th:src="@{/static/admin/assets/js/layer/layer.js}" type="text/javascript"></script>
<!-- 遮罩层 -->
<script th:src="@{/static/admin/assets/js/blockUI/jquery.blockUI.js}" type="text/javascript"></script>
<!-- jqueryForm序列化 -->
<script th:src="@{/static/js/jqueryFormSerializeJson.js}" type="text/javascript"></script>
<!--引入自定义的下拉选框-->
<script th:src="@{/static/js/self_select.js}" type="text/javascript"></script>
<script th:inline="javascript" type="text/javascript">

    var formId = [[${formKey}]];
    var formInstanceId = [[${formInstanceId}]];

    $(function () {

        //根据formId查询对应的表单字段
        $.ajax({
            type: "GET",
            url: "/web/getFormFieldListById?formId=" + formId,
            data: {},
            async: false,
            success: function (data) {
                if (data.code == 200) {
                    var formInfo = data.formInfo;
                    var formFieldList = data.formFieldList;
                    var html = '';
                    $.each(formFieldList, function (i, item) {
                        var target = "";
                        var required = item.fieldRequired;
                        var fieldName = item.fieldName;

                        if (required == 1) {
                            target = '<div class="form-group">' +
                                '<label class="col-sm-3 control-label ">' + item.fieldLabel + '</label>' +
                                '<div class="col-sm-8">' +
                                '<input class="form-control" required type="' + item.fieldType + '" id="' + item.id + '" name="' + item.fieldName + '"/>' +
                                '</div>' +
                                '</div>'
                        } else {
                            target = '<div class="form-group">' +
                                '<label class="col-sm-3 control-label ">' + item.fieldLabel + '</label>' +
                                '<div class="col-sm-8">' +
                                '<input class="form-control"  type="' + item.fieldType + '" id="' + item.id + '" name="' + item.fieldName + '"/>' +
                                '</div>' +
                                '</div>'
                        }
                        $("#taskFormDiv").append(target)
                        $.ajax({
                            type: "GET",
                            url: "/FormInstanceFieldValueController/selectformInstanceFieldValue/"+formInstanceId+"/"+fieldName,
                            data: {},
                            async: false,
                            success: function (data) {
                                $('#'+item.id).val(data.data.value)
                            }
                        })
                    })


                }
            }
        });


    })


    $("#form-add").validate({
        rules: {
            appealType: {
                required: true,
            },

        },
        submitHandler: function (form) {
            add();
        }
    });

    /**
     * 用户添加方法
     */
    function add() {
        var dataFormJson = $("#form-add").serialize();
        console.log(dataFormJson)
        $.ajax({
            cache: true,
            type: "POST",
            url: "/act/completeTask",
            data: dataFormJson,
            async: false,
            error: function (request) {
                $.modal.alertError("系统错误");
            },
            success: function (data) {
                $.operate.saveSuccess(data);
            }
        });
    }


</script>


</body>


</html>
